<template>
    <section class="main">
        <div class="content-div">
            <p class="title" style="font-size: 64px">1111</p>
            <p class="content">我来了{{name}}</p>
        </div>
        <mt-cell title="标题" label="描述信息" is-link></mt-cell>
        <mt-cell title="标题" label="描述信息" is-link></mt-cell>
        <mt-cell title="标题" label="描述信息" is-link></mt-cell>
        <mt-picker :slots="slots" :itemHeight="72"  @change="onValuesChange"></mt-picker>
    </section>
</template>

<script>
import { Picker } from 'mint-ui';
export default {
    data () {
        return {
            name:"vue + webpack",
            slots: [
                {
                flex: 1,
                values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
                className: 'slot1',
                textAlign: 'right'
                }, {
                divider: true,
                content: '-',
                className: 'slot2'
                }, {
                flex: 1,
                values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
                className: 'slot3',
                textAlign: 'left'
                }
            ]
        }
    },

    methods: {
        onValuesChange(picker, values) {
            if (values[0] > values[1]) {
                picker.setSlotValue(1, values[0]);
            }
        }
    },
}
</script>

<style lang="less" scoped>
    .content-div{
        color: #000;
        font-size: .32rem;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;

        .title{
            width: 200px; /*px*/
            height: 100%;
            border-right: 1Px solid #000;
        }

        .content {
            flex: 1
        }
        
    }
</style>